<template>
     <div class="bodsw">
        <el-input
            placeholder="请输入敏感词......"
            v-model="wordShie.word"
            class="inpShie"
            clearable>
        </el-input>
        <el-button type="primary" @click="saveShieWord">添加</el-button>
        <div class="shieBod">
            <el-tag
                :key="index"
                v-for="(tag,index) in dynamicTags"
                closable
                :disable-transitions="false"
                @close="handleClose(tag)">
                {{tag.word}}
            </el-tag>
            <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputConfirm"
                >
            </el-input>
        </div>
     </div>
</template>
<script>
   export default {
    data() {
      return {
        wordShie:{
            word:''
        },
        dynamicTags:'',
        inputVisible: false,
        inputValue: ''
      }
    },
    created(){
        this.getShieWord();
    },
    methods:{
        // 获取全部数据
       getShieWord(){
            this.$api.getShieldWord(this.froms).then(res=>{
            if(res.code=='000000'){
                this.dynamicTags = res.data.list;
              console.log(this.dynamicTags)
            }
          })
        },
        // 添加数据
        saveShieWord(){
           console.log(this.wordShie)
            this.$api.saveShieldWord(this.wordShie).then(res=>{
            if(res.code=='000000'){
                this.dynamicTags = res.data;
              console.log(this.dynamicTags)
            }
            this.getShieWord()
          })
        },
       handleClose(tag) {
        console.log(tag);
         this.$api.deleteShieldWord(tag.id).then(res=>{
            if(res.code=='000000'){
                
            }
            this.getShieWord()
          })
        // this.dynamicTags.splice(this.dynamicTags.indexOf(tag.id), 1);
      },

      handleInputConfirm() {
        let inputValue = this.inputValue;
        if (inputValue) {
          this.dynamicTags.push(inputValue);
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
    }
   }
</script>
<style lang="" scoped>
.shieBod{
  
}
.el-tag{
  dispaly:flex;
  flex-wrap: nowrap;
  justify-content:space-between;
   margin-top:20px;
   margin-left:10px!important;
}
.inpShie{
    width:40%;
}
.shieBod{
    margin-top:30px;
}
 .bodsw{
    overflow-y:hidden;
    overflow-y:scroll;
    height:520px;
    width:99%;
    padding:20px 20px 0 20px;
  }
 .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>